<template>
  <div class="app-container">
  <div class="filter-container">
        
        <el-button type="primary" @click="addClick()" style="margin-left:10px;">新增</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="车辆信息">
        <template slot-scope="scope">
          <span>{{ scope.row.ordernumber }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="返利项目">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state | parseState }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="320" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="tableRowClick().delete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 新增 -->
<el-dialog :title="dialogAdd.title" :visible.sync="dialogAdd.visible"  width="900px">
    <div class="ci">
      
       <div class="item">
          <span class="name">厂牌</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.brand" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
        <div class="item">
          <span class="name">车名</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.carname" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item">
          <span class="name">车型编码</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.carcode" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item">
          <span class="name">外观颜色</span>
          <span class="value">
              <el-input  v-model="dialogAdd.data.carcolor" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogAddClick().save()" :loading="dialogAdd.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end  新增 -->



  </div>
</template>

<script>
import * as carPurchaseApi from '@/api/cars/purchase'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'
import {objectMerge,objectEmpty} from '@/utils/index'

export default {
    components: { Pagination },
    data(){
        return{
          search:{ 
              number:'',
              customer:'',
              phone:'',
              daterange:'',
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
            carinfo:[],
          },

          dialogAdd:{
              visible:false,
              saveloading:false,
              title:'新增',
              type:1,
              data:{
                  id:'',
                  brand:'',
                  carname:'',
                  carcode:'',
                  carcolor:'',
              }
          },

        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        //enumHelper.initOptions(that.selectOptions.purchasetype,enumHelper.cars.purchaseType);
        //enumHelper.initOptions(that.selectOptions.paystage,enumHelper.cars.payStage);
        that.fetchData();
    },
    filters:{

      parseState(val){
        return enumHelper.cars.distributeState.getName(val);
      }

    },
    methods:{
        fetchData(){
          var that=this;
            carPurchaseApi.getDistributeAfterList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        addClick(){
            var that=this;
            that.dialogAddClick().init();
            that.dialogAdd.visible=true;
        },
        tableRowClick(){
          var that=this;
          return {
            delete(id){
              var data=that.list.filter(o=>id==id)[0];
            },

            details(id){
                that.$router.push({
                    path:'/cars/caroutstoredetails/'+id
                })
            }
          }
        },
        dialogAddClick(){
          var that=this;
          var dg=that.dialogAdd;
          return{
            init(data){
              data?objectMerge(dg.data,data):objectEmpty(dg.data);
            },
            save(){
              dg.visible=false;
            }
          }
        },
        
    }
}
</script>

<style scoped>

</style>